<template>
  <div>
    <el-container>
      <el-header>
        <el-card style="position: relative">
          <el-breadcrumb separator="/">

            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">权限</a></el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="position: absolute;right: 20px;top: 8px">
          <el-dropdown trigger="click">
  <span class="el-dropdown-link" style="cursor: pointer;
            color: #409EFF;">
      <img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/timg.jpg"
           style="width: 40px;height: 40px;border-radius: 10px;">
  <i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <a style="text-decoration: none" href="/">首页</a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a style="text-decoration: none" href="/">退出</a>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </div>
        </el-card>
      </el-header>

      <el-main>
        <el-card style="position: relative; padding: 20px;display: block">
                    <span>
                        <i class="el-icon-search"></i>筛选搜索
                    </span>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
                     label-width="100px" class="demo-ruleForm">
              <el-form-item label="输入搜索:" prop="pass">
                <el-input placeholder="账号/姓名" v-model="ruleForm.pass"
                          style="width: 168px;height: 30px;"
                          clearable autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item style="position: absolute;right: 30px;top: 30px">
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">查询搜索</el-button>
              </el-form-item>
            </el-form>
        </el-card>
        <el-card style="position: relative; padding: 20px;display: block;margin: 20px 0">
                <span>
                        <i class="el-icon-notebook-2"></i>数据列表
                    </span>
          <el-popover
              placement="right"
              width="400"
              trigger="click">
            <el-table :data="gridData">
              <el-table-column width="150" property="date" label="日期"></el-table-column>
              <el-table-column width="100" property="name" label="姓名"></el-table-column>
              <el-table-column width="300" property="address" label="地址"></el-table-column>
            </el-table>
            <el-button style="position: absolute;right: 30px;top: 30px" slot="reference">添加</el-button>
          </el-popover>
        </el-card>
            <el-table
                :data="tableData"
                border
                style="width: 100%;position: relative;top: 0">

              <el-table-column
                  prop="id"
                  label="编号"align="center">
              </el-table-column>
              <el-table-column
                  prop="account"
                  label="账号"align="center">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="姓名"align="center">
              </el-table-column>
              <el-table-column
                  prop="email"
                  label="邮箱"align="center">
              </el-table-column>
              <el-table-column
                  prop="add_time"
                  label="添加时间"align="center">
              </el-table-column>
              <el-table-column
                  prop="last_login"
                  label="最后登录"align="center">
              </el-table-column>
              <el-table-column
                  prop="enable"
                  label="是否启用"align="center">
                <el-tooltip :content="'Switch value: ' + value" placement="top">
                  <el-switch
                      v-model="value"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-value="100"
                      inactive-value="0">
                  </el-switch>
                </el-tooltip>
              </el-table-column>
              <el-table-column
                  prop="operate"
                  label="操作"align="center">
              </el-table-column>
            </el-table>
  </el-main>
      <el-footer>
        <div style="position: relative;left: 0;top: 0;margin-top: 20px">
          <div style="position: absolute;right: 150px">
            <span style="font-size: 15px">共5条
          <template>
            <el-select v-model="val" filterable placeholder="10条/页"
                       style="text-align: center; text-align-last: center; margin-right: 20px">
              <el-option
                  v-for="item in options"
                  :key="item.val"
                  :label="item.label"
                  :value="item.val">
              </el-option>
            </el-select>
          </template>
        <el-input-number v-model="num" @change="handleChange"
                         :min="1" :max="10"
                         style="width: 130px;height: 20px;">

        </el-input-number></span>
          </div>
          <div style="position: absolute;right: 0">
                    <span>前往第:
          <el-input style="width: 50px;height: 20px"
                    placeholder="1" v-model="input">
          </el-input>
          <span style="font-size:15px">页</span></span>
          </div>
        </div>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
export default {
  data:function () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号或姓名'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    return {
      input: '1',
      options: [{
        val: '选项1',
        label: '黄金糕'
      }, {
        val: '选项2',
        label: '双皮奶'
      }],
      val: '10条/页',

      value:'100',
      ruleForm: {
        pass: ''
      },
      rules: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ]
      },
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      tableData: [{
        id: 1,
        account:'test',
        name: '测试账号',
        email: 'test@qq.com',
        add_time:'2018-09-29 13:55:30',
        last_login:'2018-09-29 13:55:39',
        operate:'分配角色 编辑 删除'
      }, {
        id: 2,
        account:'test',
        name: '测试账号',
        email: 'test@qq.com',
        add_time:'2018-09-29 13:55:30',
        last_login:'2018-09-29 13:55:39',
        operate:'分配角色 编辑 删除'
      }, {
        id: 3,
        account:'test',
        name: '测试账号',
        email: 'test@qq.com',
        add_time:'2018-09-29 13:55:30',
        last_login:'2018-09-29 13:55:39',
        operate:'分配角色 编辑 删除'
      } ],
      num:1
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleChange(value) {
      console.log(value);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>

</style>